<template>
  <div class="container">
    <elm-header title="我的" ></elm-header>
    <div class="scroller">
      <!-- 我的头部 -->
      <div class="profile-header van-hairline--top" @click="navAccount">
        <img class="avatar" :src="imgOrigin+userInfo.avatar" alt="">
        <div class="register-login">
          <span class="register-login-text">{{isLogin?userInfo.username:'登录/注册'}}</span>
          <div class="bind-phone">
            <img src="../../images/bindphone.png" alt="">
            <span>暂无绑定的手机号</span>
            </div>
        </div>
        <van-icon name="arrow" />
      </div>
      <!-- 我的资源 -->
      <div class="profile-resource">
        <div >
          <span class="balance resource-count">{{userInfo.balance}}</span>
          <span class="resource-label">我的余额</span>
        </div>
        <div >
          <span class="discounts resource-count">{{userInfo.gift_amount}}</span>
          <span class="resource-label">我的优惠</span>
        </div>
        <div >
          <span class="score resource-count">{{userInfo.point}}</span>
          <span class="resource-label">我的积分</span>
        </div>
      </div>
      <!-- 其他 -->
      <van-cell  is-link>
        <template #title>
          <img class="profile-item-icon" src="../../images/icon-order.png" alt="">
          <span class="profile-item-title">我的订单</span>
        </template>
      </van-cell>
      <van-cell  is-link>
        <template #title>
          <img class="profile-item-icon" src="../../images/icon-shopping.png" alt="">
          <span class="profile-item-title">积分商城</span>
        </template>
      </van-cell>
      <van-cell  is-link style="margin-bottom:.1rem">
        <template #title>
          <img class="profile-item-icon" src="../../images/icon-vip.png" alt="">
          <span class="profile-item-title">饿了么会员</span>
        </template>
      </van-cell>

      <van-cell  is-link >
        <template #title>
          <img class="profile-item-icon" src="../../images/icon-service_center.png" alt="">
          <span class="profile-item-title">服务中心</span>
        </template>
      </van-cell>
      <van-cell  is-link style="margin-bottom:.1rem">
        <template #title>
          <img class="profile-item-icon" src="../../images/icon-elm.png" alt="">
          <span class="profile-item-title">下载饿了么App</span>
        </template>
      </van-cell>
    </div>
  </div>
</template>
<script>
import elmHeader from '../../components/elmHeader'
import {mapState} from'vuex'
export default {
  components:{
    'elm-header':elmHeader
  },
  data(){
    return {
      imgOrigin:'http://elm.cangdu.org/img/'
    }
  },
  computed:{
    ...mapState('profile',['isLogin','userInfo'])
  },
  methods:{
    // 跳转到 账号信息页
    navAccount(){
      this.$router.push({path:'/profile/account'})
    }
  }
}
</script>
<style lang='scss' scoped>
@import '../../styles/var.scss';
@import '../../styles/mixin.scss';
.container{
  @include container;
  .scroller{
    @include scroller;
    background-color: #f5f5f5;
    .profile-header{
      background-color: $primary;
      display: flex;
      align-items: center;
      padding: .2rem .16rem;
      .avatar{
        width: .54rem;
        height: .54rem;
        border-radius: 50%;
      }
      .register-login{
        color: #fff;
        margin-left: .16rem;
        .register-login-text{
          font-size: .2rem;
          font-weight: 600;
        }
        .bind-phone{
          margin-top: .1rem;
          img{
            width: .17rem; 
            height: .17rem;
            vertical-align: middle;
          }
          span{
            font-size: .13rem;
            vertical-align: middle;
          }
        }
      }
      .van-icon-arrow{
        color: #fff;
        font-size: .2rem;
        position: absolute;
        right: .16rem;
      }
    }
    .profile-resource{
      display: flex;
      height: .85rem;
      margin-bottom:.1rem;
      .resource-count{
        font-size: .27rem;
        font-weight: 700;
      }
      .resource-label{
        margin-top: .1rem;
      }
      .balance{
        color: #f90;
      }
      .balance::after{
        content: '元';
        font-size: .12rem;
        color: #666;
        font-weight: 500;
      }
      .discounts{
        color: #ff5f3e;
      }
      .discounts::after{
        content: '个';
        font-size: .12rem;
        color: #666;
        font-weight: 500;
      }
      .score{
        color: #6ac20b;
      }
      .score::after{
        content: '分';
        font-size: .12rem;
        color: #666;
        font-weight: 500;
      }
    }
    .profile-resource>*{
      flex:1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #FFF;

    }
    .van-cell__title{
      .profile-item-icon{
        width: .24rem;
        height: .24rem;
        vertical-align: middle;
        margin-right: .08rem;
      }
      .profile-item-title{
        vertical-align: middle;
        font-size: .16rem;
      }
    }
  }
}
</style>